<template>
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="'default'"
        status-icon
    >
        <el-form-item label="用户名称" prop="name">
            <el-input
                v-model="ruleForm.name"
                :formatter="(value: string) => value.toUpperCase()"
            />
        </el-form-item>
        <el-form-item label="用户状态" prop="status">
            <el-switch
                v-model="ruleForm.status"
                active-value="在用"
                inactive-value="停用"
                style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #ff4949;
                "
            />
        </el-form-item>
        <el-form-item label="站点" prop="cfs_id">
            <el-select
                v-model="ruleForm.cfs_id"
                :clearable="true"
                filterable
                placeholder="Select"                
                :value-on-clear="() => null"
            >
                <el-option
                    v-for="optValue in cyCfs"
                    :key="optValue.value"
                    :label="optValue.label"
                    :value="optValue.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
            </el-button>
            <el-button type="primary" @click="submitAndNewForm(ruleFormRef)">
                保存并新增</el-button
            >
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup name="User">
import { reactive, ref, onMounted } from 'vue';
import { FormInstance, FormRules } from 'element-plus';
import { UserModel } from '@/common/types/model';
import { Request } from '@/app/request';
import { isEmpty, omit } from 'lodash';
import { useAppStore } from '@/store/app';

const props = defineProps<{
    data?: UserModel;
}>();
const emit = defineEmits(['yh-newuser', 'yh-closedialog', 'yh-updateuser']);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<UserModel>({
    id: 0,
    name: '',
    status: '',
    cfs_id: undefined,
    remark: '',
});
const { cyCfs } = useAppStore();

onMounted(() => {
    if (!isEmpty(props.data)) {
        Object.assign(ruleForm, props.data);
    }
});

const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
});
const save = async (formEl: FormInstance | undefined) => {
    if (!formEl) return false;
    const validResult = await formEl.validate();
    if (validResult) {
        if (ruleForm.id === 0) {
            // 新增
            const req = new Request<UserModel>(
                '用户增加',
                omit(ruleForm, ['id']),
            );
            const r = await req.post();
            if (r.code > 100) {
                emit('yh-newuser', r.obj);
                return true;
            }
        } else {
            // 修改
            const req = new Request<UserModel>(
                '用户修改',
                omit(ruleForm, 'roleusers'),
            );
            const r = await req.post();
            if (r.code > 100) {
                emit('yh-updateuser', ruleForm);
                return true;
            }
        }
    } else {
        return false;
    }
};
const submitForm = async (formEl: FormInstance | undefined) => {
    const r = await save(formEl);
    if (r) {
        emit('yh-closedialog');
    }
};

const submitAndNewForm = async (formEl: FormInstance | undefined) => {
    const r = await save(formEl);
    if (r) {
        ruleForm.id = 0;
        ruleForm.name = '';
        ruleForm.status = '停用';
        ruleForm.cfs_id = undefined;
        ruleForm.remark = '';
    }
};
</script>
